import React, {useState} from "react";
import {Layout, Menu, MenuProps} from "antd";
import Header from "@/components/Header";
import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
import Home from "@/pages/Home.tsx";
import AdminList from "@/pages/admin/AdminList.tsx";
import BuildingList from "@/pages/building/BuildingList.tsx";
import RoomList from "@/pages/room/RoomList.tsx";
import ResidentList from "@/pages/resident/ResidentList.tsx";
import ChargeList from "@/pages/charge/ChargeList.tsx";
import ParkingAreaList from "@/pages/parkingArea/ParkingAreaList.tsx";
import ParkingChargeList from "@/pages/parkingCharge/ParkingChargeList.tsx";
import RepairRequestList from "@/pages/repairRequest/RepairRequestList.tsx";
import StaffList from "@/pages/staff/StaffList.tsx";
import FacilityList from "@/pages/facility/FacilityList.tsx";
import FacilityMaintenanceRecordList from "@/pages/facilityMaintenanceRecord/FacilityMaintenanceRecordList.tsx";
import ChartList from "@/pages/chart/ChartList.tsx";
import {
  BuildOutlined,
  CarOutlined,
  ClusterOutlined,
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  MoneyCollectOutlined,
  PieChartOutlined,
  RestOutlined,
  SettingOutlined,
  ShareAltOutlined,
  SignatureOutlined,
  TeamOutlined,
  UserOutlined
} from "@ant-design/icons";
import {useTranslation} from "react-i18next";

const MainLayout: React.FC = () => {

  const {Sider, Content} = Layout;
  const { t } = useTranslation();

  const contentStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    padding: '10px 10px',
    overflowY: 'auto'
  };

  const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px'
  };

  const layoutStyle = {
    overflow: 'hidden',
    height: '100vh',
    width: '100vw',
  };

  const [collapsed, setCollapsed] = useState(false);

  const menuItems = [
    { key: 'collapse', label: '收起', icon: collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined) },
    { key: '/Home', label: '主页', path: '/Home', icon: React.createElement(HomeOutlined) },
    { key: '/AdminList', label: '管理员', path: '/AdminList', icon: React.createElement(UserOutlined) },
    { key: '/BuildingList', label: '楼栋信息', path: '/BuildingList', icon: React.createElement(ClusterOutlined ) },
    { key: '/RoomList', label: '单元信息', path: '/RoomList', icon: React.createElement(RestOutlined) },
    { key: '/ResidentList', label: '住户信息', path: '/ResidentList', icon: React.createElement(BuildOutlined) },
    { key: '/ChargeList', label: '收费信息', path: '/ChargeList', icon: React.createElement(MoneyCollectOutlined) },
    { key: '/ParkingAreaList', label: '车位信息', path: '/ParkingAreaList', icon: React.createElement(CarOutlined) },
    { key: '/ParkingChargeList', label: '车位收费信息', path: '/ParkingChargeList', icon: React.createElement(MoneyCollectOutlined) },
    { key: '/RepairRequestList', label: '报修信息', path: '/RepairRequestList', icon: React.createElement(SettingOutlined) },
    { key: '/StaffList', label: '维修保养人员', path: '/StaffList', icon: React.createElement(TeamOutlined) },
    { key: '/FacilityList', label: '公共设施信息', path: '/FacilityList', icon: React.createElement(ShareAltOutlined) },
    { key: '/FacilityMaintenanceRecordList', label: '公共设施保养记录', path: '/FacilityMaintenanceRecordList', icon: React.createElement(SignatureOutlined) },
    { key: '/ChartList', label: '数据统计', path: '/ChartList', icon: React.createElement(PieChartOutlined) },
  ];

  const navigate = useNavigate();

  const location = useLocation();
  const defaultLocation = location.pathname === '/' ? '/Home' : location.pathname;

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === 'collapse') {
      setCollapsed(!collapsed)
      return
    }
    navigate(e.key);
  };

  return (
    <Layout style={layoutStyle}>
      <Header title={t('title')}/>
      <Layout>
        <Sider collapsible collapsed={collapsed} style={siderStyle} theme={"light"} trigger={null}>
          <Menu
            onClick={handleMenuClick}
            defaultSelectedKeys={[defaultLocation]}
            defaultOpenKeys={[defaultLocation]}
            mode="inline"
            items={menuItems}
          />
        </Sider>
        <Content style={contentStyle}>
          <Routes>
            <Route path="/Home" element={<Home/>} />
            <Route path="/AdminList" element={<AdminList/>} />
            <Route path="/BuildingList" element={<BuildingList/>} />
            <Route path="/RoomList" element={<RoomList/>} />
            <Route path="/ResidentList" element={<ResidentList/>} />
            <Route path="/ChargeList" element={<ChargeList/>} />
            <Route path="/ParkingAreaList" element={<ParkingAreaList/>} />
            <Route path="/ParkingChargeList" element={<ParkingChargeList/>} />
            <Route path="/RepairRequestList" element={<RepairRequestList/>} />
            <Route path="/StaffList" element={<StaffList/>} />
            <Route path="/FacilityList" element={<FacilityList/>} />
            <Route path="/FacilityMaintenanceRecordList" element={<FacilityMaintenanceRecordList/>} />
            <Route path="/ChartList" element={<ChartList/>} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default MainLayout;